#@layout()

#define css()
<style>
    .nav-tabs {
        border-bottom: 1px solid #dee2e6;

    }
</style>
#end

#define content()
    <section class="content-header">

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">

                    <div class="row mb-2">
                        <div class="col-sm-12">
                            <h1>
                                自动回复设置
                                <small data-toggle="tooltip" title="" data-placement="right"
                                       data-trigger="hover"><i class="nav-icon far fa-question-circle"></i></small>
                                <small> 首页 / 微信 / 自动回复设置</small>
                            </h1>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- /.container-fluid -->
    </section>

    <section class="content">

        <div class="container-fluid">
                <div class="card card-outline card-primary">

                    <!-- /.card-header -->
                    <!-- form start -->
                    <form class=" form-setting autoAjaxSubmit" autocomplete="off"
                          action="#(CPATH)/admin/wechat/doReplySave" method="post" data-ok-message="自动回复设置关键字保存成功">
                        <input type="hidden" name="id" value="#(reply.id ??)">
                        <div class="card-body">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">关键字</label>

                                <div class="col-sm-6">
                                    <input type="input" class="form-control" placeholder="请输入关键字"
                                           name="keyword" value="#(reply.keyword ??)">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">回复类型</label>

                                <div class="col-sm-6">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="option.rtype" value="text" #checkedIf(option.rtype ??== "text")>
                                            文字
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="option.rtype" value="image" #checkedIf(option.rtype ??== "image")>
                                            图片
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="option.rtype" value="textAndImage" #checkedIf(option.rtype ??== "textAndImage")>
                                            文字 + 图片
                                        </label>
                                    </div>
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="option.rtype"  value="miniprogram" #checkedIf(option.rtype ??== "miniprogram")>
                                            微信小程序
                                        </label>
                                    </div>
                                </div>
                            </div>





                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">内容配置</label>
                                <div class="col-sm-6">
                                    <div class="card card-primary card-outline card-outline-tabs" style="box-shadow: none;">
                                        <div class="card-header p-0 border-bottom-0">
                                            <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active" href="#tab_1" id="custom-tabs-four-home-tab" data-toggle="pill" role="tab" aria-controls="custom-tabs-four-home"
                                                       aria-selected="true">文字</a>
                                                </li>
                                                <li class="nav-item"><a class="nav-link" href="#tab_2" data-toggle="tab">图片</a></li>
                                                <li class="nav-item"><a class="nav-link" href="#tab_3" data-toggle="tab">微信小程序</a></li>
                                            </ul>
                                            <div class="tab-content" style="padding-top:1rem;">
                                                <div class="tab-pane active" id="tab_1">
                                                    <textarea rows="5" class="form-control" name="option.text"
                                                              placeholder="请输入回复内容...">#(option.text ??)</textarea>
                                                    <p class="text-muted"> 超链接格式为：&lt;a href=&quot;链接地址&quot;&gt;链接文字&lt;/a&gt; </p>
                                                </div>
                                                <!-- /.tab-pane -->
                                                <div class="tab-pane" id="tab_2">
                                                    <div class="jpress-image-browser">
                                                        <input type="hidden" name="option.image" value="#(option.image ??)"/>
                                                        <img src="#(CPATH)#(option.image ?? '/static/commons/img/nothumbnail.jpg')">
                                                        <a class="image-reset"> <i class="fa fa-edit"></i></a>
                                                    </div>
                                                </div>
                                                <!-- /.tab-pane -->
                                                <div class="tab-pane" id="tab_3">
                                                    <div class="card-body ">
                                                        <div class="form-group row">
                                                            <label class="col-sm-2 col-form-label">标题</label>
                                                            <div class="col-sm-10">
                                                                <input type="text" class="form-control" name="option.miniprogram_title"
                                                                       placeholder="小程序标题..." value="#(option.miniprogram_title ??)">
                                                            </div>
                                                        </div>
                                                        <div class="form-group row">
                                                            <label class="col-sm-2 col-form-label">AppId</label>
                                                            <div class="col-sm-10">
                                                                <input type="text" class="form-control" name="option.miniprogram_appid"
                                                                       placeholder="微信小程序的AppId..." value="#(option.miniprogram_appid ??)">
                                                            </div>
                                                        </div>
                                                        <div class="form-group row">
                                                            <label class="col-sm-2 col-form-label">跳转页面</label>
                                                            <div class="col-sm-10">
                                                                <input type="text" class="form-control" name="option.miniprogram_page"
                                                                       placeholder="用户点击小程序时跳转的页面" value="#(option.miniprogram_page ??)">
                                                            </div>
                                                        </div>

                                                        <div class="form-group row">
                                                            <label  class="col-sm-2 col-form-label">封面图</label>
                                                            <div class="col-sm-10">
                                                                <div class="jpress-image-browser">
                                                                    <input type="hidden" name="option.miniprogram_cover" value="#(option.miniprogram_cover ??)"/>
                                                                    <img src="#(CPATH)#(option.miniprogram_cover ?? '/static/commons/img/nothumbnail.jpg')">
                                                                    <a class="image-reset"> <i class="fa fa-edit"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>


                                                    </div>
                                                </div>
                                                <!-- /.tab-pane -->
                                            </div>
                                            <!-- /.tab-content -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                        <div class="card-footer">
                            <div class="offset-sm-2 col-sm-10 submit-block">
                                <div class="card-submit">
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-footer -->
                    </form>
                </div>
            </div>

    </section>

#end
